<template>
    <div class="hotIssuesStatis">
        <div class="header flexbetween">
            <div class="flex-center">
                <span class="title">数据范围</span>
                <el-radio-group v-model="time" size="small" class="mr20" @change="radioTimeChange">
                    <el-radio-button label="0">今天</el-radio-button>
                    <el-radio-button label="1">昨天</el-radio-button>
                    <el-radio-button label="7">近一周</el-radio-button>
                    <el-radio-button label="30">近30天</el-radio-button>
                </el-radio-group>
                <el-date-picker class="mr20" v-model="date" size="small" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="dateRangeChange">
                </el-date-picker>
                <div class="mr20">渠道入口</div>
                <a-select v-model="sourceIds" style="width: 300px" mode="multiple" @change="getData"
                          :getPopupContainer="triggerNode => { return triggerNode.parentNode }">
                    <a-select-option v-for="source in sourceList" :key="source.id" :value="source.id">
                        {{ source.sourceName }}
                    </a-select-option>
                </a-select>
            </div>
            <span class="hint">仅支持查询近90天的数据</span>
        </div>
        <div class="flexbetween betweenCard mb20">
            <div class="card">
                <div class="card-header flexbetween">
                    <span class="title">热点问题统计</span>
                    <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                        <span class="iconfont icon-xiazai" @click="exportHotQuestion('exportHotQuestion')"></span>
                    </el-tooltip>
                </div>
                <div class="card-body" style="display: flex">
                    <div class="charts">
                        <echarts :optionData="queOption"></echarts>
                    </div>
                    <div class="topCount">
                        <p class="title">TOP10</p>
                        <div class="topList">
                            <p class="item" v-for="(item,i) in hotQueTopList" :key="i">
                                <span :class="['iconfont', 'icon-paimingdiyi', `paiming${i}`]" v-if="i <= 2"></span>
                                {{item.name}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header flexbetween">
                    <span class="title">热点问题目录统计</span>
                    <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                        <span class="iconfont icon-xiazai" @click="exportHotQuestion('exportHotQuestionClass')"></span>
                    </el-tooltip>
                </div>
                <div class="card-body">
                    <echarts :optionData="directoryOption"></echarts>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header flexbetween">
                <span class="title">热点问统计详情</span>
                <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                    <span class="iconfont icon-xiazai" @click="exportHotQuestion('exportHotQuestionDetail')"></span>
                </el-tooltip>
            </div>
            <div class="card-body">
                <element-table :data="hotQuestionDetailList" :columns="cloumns" :loading="tableLoading" :tableHeight="350" :pageNo="pageNo"
                               :pageSize="pageSize" :total="total" @changePageNo="changePageNo" @changePageSize="changePageSize"
                               :pagFixed="false" :isNeedPag="false">
                </element-table>
            </div>
        </div>

        <!-- 导出 -->
        <exportExcel ref="exportExcel"></exportExcel>
    </div>
</template>

<script>
import echarts from "@/components/Echarts";
import { getPieOption } from "@/components/Echarts/option";
import exportExcel from "@/components/exportExcel";
import elementTable from "@/components/elementTable";
import { initFilterTime } from "@/utils/index";
import { mapGetters } from "vuex";
import { hotQuestion, exportHotQuestion } from "@/api/robotReport";
export default {
    name: "hotIssuesStatis",
    data() {
        return {
            time: "0",
            date: "",
            sourceIds: [],
            pickerOptions: {
                disabledDate(time) {
                    let curDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
                    let three = 90 * 24 * 3600 * 1000;
                    let threeMonths = curDate - three;
                    return time.getTime() > curDate || time.getTime() < threeMonths;;
                }
            },
            queOption: { yAxis: { axisLine: { show: false } } },
            directoryOption: { yAxis: { axisLine: { show: false } } },
            hotQueList: [],
            hotQuestionDetailList: [],
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            cloumns: [
                {
                    config: {
                        label: "序号",
                        prop: "index"
                    },
                },
                {
                    config: {
                        label: "标准问",
                        prop: "question"
                    },
                },
                {
                    config: {
                        label: "知识类型",
                        prop: "knowledgeType"
                    },
                },
                {
                    config: {
                        label: "所属目录",
                        prop: "className"
                    },
                },
                {
                    config: {
                        label: "访问量",
                        prop: "hits"
                    },
                },
                {
                    config: {
                        label: "点赞量",
                        prop: "useFull"
                    },
                },
            ]
        }
    },
    methods: {
        getData() {
            if (!this.date) {
                return this.$antMessage.warning("请选择日期");
            }
            this.tableLoading = true;
            var param = {
                startDate: this.date[0],
                endDate: this.date[1],
                sourceIds: this.sourceIds
            }
            hotQuestion(param).then(resp => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    var { hotQuestion, hotQuestionClass, hotQuestionDetailList } = resp.data;
                    hotQuestionDetailList.forEach((item, i) => {
                        item.index = i + 1;
                    });
                    this.hotQuestionDetailList = hotQuestionDetailList;
                    this.getQueData(hotQuestion);
                    this.getDireData(hotQuestionClass);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        getQueData(dataList = []) {
            dataList = JSON.parse(JSON.stringify(dataList).replace(/question/g, 'name').replace(/ratio/g, 'value'));
            this.hotQueList = dataList.sort((a, b) => { return b.value - a.value });
            let queOption = {
                series: [{ data: dataList }]
            };
            this.queOption = getPieOption(queOption);
        },
        getDireData(dataList = []) {
            dataList = JSON.parse(JSON.stringify(dataList).replace(/className/g, 'name').replace(/ratio/g, 'value'));
            let directoryOption = {
                series: [{ data: dataList }]
            };
            this.directoryOption = getPieOption(directoryOption);
        },
        radioTimeChange(val) {
            this.date = initFilterTime(val);
            this.getData();
        },
        dateRangeChange() {
            this.time = "";
            this.getData();
        },
        changePageSize(val) {
            this.pageSize = val;
        },
        changePageNo(val) {
            this.pageNo = val;
        },
        exportHotQuestion(type) {
            if (!this.date) {
                return this.$antMessage.warning("请选择日期");
            }
            var param = {
                startDate: this.date[0],
                endDate: this.date[1],
                sourceIds: this.sourceIds
            }
            var fileName = {
                exportHotQuestion: "热点问题统计",
                exportHotQuestionClass: "热点问题目录统计",
                exportHotQuestionDetail: "热点问统计详情"
            }
            var url = "/v1/admin/statistic/" + type;
            this.$refs.exportExcel.showLoading();
            exportHotQuestion(url, param).then(resp => {
                this.$refs.exportExcel.closeLoading();
                if (resp.status == 0) {
                    this.$refs.exportExcel.exports(fileName[type], resp.data);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        }
    },
    created() {
        this.date = initFilterTime(0);
        this.getData();
    },
    computed: {
        ...mapGetters(["sourceList"]),
        hotQueTopList() {
            return this.hotQueList.slice(0, 10);
        }
    },
    components: {
        echarts,
        elementTable,
        exportExcel
    }
}
</script>

<style lang="scss">
.hotIssuesStatis {
    .betweenCard {
        .card-body {
            height: 450px;
            .charts {
                width: 70%;
            }
        }
    }
}
</style>